<template>
    <div class="ymsbanner">
        <h1 class="title">THANKS</h1>
        <div class="container">
            <el-form :model="from" ref="ruleForm" class="demo-ruleForm">
                <el-form-item label="E-mail">
                    <el-input class="input" type="text" placeholder="Please input E-mail" v-model="from.customerEmail" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Name">
                    <el-input class="input" type="text" placeholder="Please input Name" v-model="from.customerName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="facebook ID">
                    <el-input class="input" type="text" placeholder="请输入facebook ID" v-model="from.customerFacebookId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="submitBtn" size="medium" type="primary" @click="submit">SUBMIT</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="shopBox">
            <div class="shopBox-item">
                <p><span>Order#</span> <span>{{orderData.orderName}}</span></p>
                <p><span>Porchase AI#</span> <span>{{orderData.asin}}</span></p>
            </div>
            <div class="shopBox-item">
                <img :src="orderData.orderImage" alt="">
                <div>
                    <p class="border"><span>{{orderData.productName}}</span></p>
                    <p class="border"><span style="font-weight:700">Warranty</span> <span>
                            <p style="justify-content: flex-end;">From {{orderData.warrantyStartDate}}</p>
                            <p style="justify-content: flex-end;">To {{setTime(orderData.warrantyStartDate,orderData.warrantyEndDate)}}</p>
                        </span></p>
                    <p><span style="font-weight:700">Free Gift</span> 
                    <span class="textWidth">To share your experience on Amazon. Get the free gift without any additional fee!</span></p>
                        
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {post} from '../../api/index'
    export default {
        data() {
            return {
                from: {
                    orderId: '',
                    customerEmail: '',
                    customerFacebookId: '',
                    customerName: ''
                },
                formLabelAlign: {},
                orderData: {}
            }
        },
        methods: {
            submit() {
                if (!this.from.customerEmail) {
                    this.$message({ message: 'Please input email', type: 'error'});
                    return
                }
                var reg = /^([a-zA-Z]|[0-9])(\w)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                if(!reg.test(this.from.customerEmail)){
                    this.$message({ message: 'Please enter the correct email address', type: 'error'});
                    return;
                }
                this.from.customerInformationId = this.orderData.customerInformationId;
                this.from.orderId = this.orderData.orderId;
                post('/landing_page/insertCustomerInformationInfo', this.from).then(res => {
                    if (res.code === 200) {
                        // this.orderData.orderId = res.data || this.orderData.orderId;
                        this.orderData.customerInformationId = res.data;
                        // return
                        this.$router.push({path:'/gift', query: {customerInformationId: this.orderData.customerInformationId, asin: this.orderData.asin, orderId: this.orderData.orderId, orderImage:this.orderData.orderImage}})
                    }
                })
            },
            setTime(time,stop) {
                if (!time) return '';
                let d = new Date(time);
                let num = d.getTime();
                num += (1000 * 60 * 60 * 24 * 30) * parseInt(stop);
                d = new Date(num);
                let year = d.getFullYear();
                let month = d.getMonth() + 1 > 9 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1);
                let day = d.getDate() > 9 ?  d.getDate() : '0' +  d.getDate();
                return `${year}-${month}-${day}`
            }
        },
        created() {
            this.orderData = this.$route.query.orderData;
            if (!this.orderData.orderId) {
                this.$router.replace('/');
                return
            }
        }
    }
</script>

<style lang="less" scoped>
.ymsbanner{
    width: 100%;
    height: 150px;
    line-height: 150px;
    background-image: url(../../assets/registration.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    .title{
        text-align: center;
        font-size: 56px;
        color: #fff;
    }
    .title2{
        padding: 35px 0;
        margin: 0;
        line-height: 1;
        text-align: center;
        color: #fb9c2e;
        font-size: 18px;
    }
}
.container{
        background: #fb9c2e;
        width: 80%;
        max-width: 850px;
        padding: 30px 20px;
        border-radius: 5px;
        margin: 0 auto;
        margin-top: 60px;
        .demo-ruleForm{
            max-width: 650px;
            margin: 0 auto;
        }
        .submitBtn{
            width: 100%;
            height: 50px;
            background: #333 !important;
        }
        .label{
            text-align: left;
            line-height: 1;
            color: #2c3e50;
            font-weight: 700;
            margin-bottom: 12px;
            font-size: 16px;
        }
        .input{
            height: 50px;
        }
        /deep/ .el-input__inner{
            height: 100%;
        }
        /deep/ .el-form-item__label{
            color: #2c3e50;
            font-weight: 700;
            font-size: 16px;
        }
    .title{
        font-size: 24px;
        margin-bottom: 15px;
    }
    .commodityBox{
        overflow: auto;
        &-left{
            float: left;
            width: 200px;
            border: 1px solid #aaa;
            margin-right: 16px;
            margin-bottom: 16px;
            img{
                width: 100%;
            }
        }
        &-right{
            float: left;
            color: #666;
            max-width: 390px;
            p{
                font-size: 16px;
                margin-bottom: 8px;
            }
        }
    }
    
}
.shopBox{
    background: #fff;
    width: 80%;
    max-width: 890px;
    margin: 0 auto;
    margin-top: 20px;
    padding-bottom: 20px;
    &-item{
        line-height: 1.5;
        padding: 15px;
        border: 1px solid #ccc;
        margin-bottom: 15px;
        overflow: auto;
        p{
            display: flex;
            align-items: center;
            padding: 5px;
            justify-content: space-between;
            span{
                max-width: 100%;
                white-space:normal;
                text-align: left;
            }
        }
        .border{
            border-bottom: 1px solid #aaa;
            padding: 15px 0;
            margin-bottom: 15px;
        }
        img{
            width: 250px;
            float: left;
        }
        div{
            width: 100%;
            float: left;
            max-width: 605px;
        }
        .textWidth{
            width: 400px;
        }
    }
}
@media only  screen and  (max-width:900px){
    .ymsbanner{
        background: none;
    }
    .ymsbanner .title{
        display: none;
    }
    .textWidth{
        text-align: right;
        width: 160px !important;
    }
}
</style>